﻿<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Hello, World</title>
    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px;
        }

        #container {
            height: 100%;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=BC093bd3cb2713db612cd3ca004eb56e">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=BC093bd3cb2713db612cd3ca004eb56e"
        //v1.4版本及以前版本的引用方式：src="http://api.map.baidu.com/api?v=1.4&key=BC093bd3cb2713db612cd3ca004eb56e&callback=initialize"
    </script>
</head>
<body>
    <div id="container"></div>
    <script type="text/javascript">
        var map = new BMap.Map("container");          // 创建地图实例
        var points = [];
        var markers=[];
        var opts=[];
        var info=null;
        
        {{#list result}}
        info = {"deviceId":"{{deviceId}}", "deviceName":"{{deviceName}}", "latitude":{{latitude}}, "longitude":{{longitude}}, "time":"{{time}}" };
        markers.push(new BMap.Marker(new BMap.Point({{longitude}},{{latitude}})))
        points.push(new BMap.Point({{longitude}},{{latitude}}));
        opts.push({width : 200,height: 100,title : "" , enableMessage:true, message:info.deviceId+","+info.deviceName+","+info.time});
        {{/list}}
                    
        

        function click_marker(info_msg,point){
            return function(){
                var infoWindow = new BMap.InfoWindow(info_msg.message, info_msg);  // 创建信息窗口对象 
                map.openInfoWindow(infoWindow, point); //开启信息窗口
            }
        }
        var point = new BMap.Point({{first.longitude}},{{first.latitude}});  // 创建点坐标
        map.centerAndZoom(point, 15);                 // 初始化地图，设置中心点坐标和地图级别


        var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
        var top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
        var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
            /*缩放控件type有四种类型:
            BMAP_NAVIGATION_CONTROL_SMALL：仅包含平移和缩放按钮；BMAP_NAVIGATION_CONTROL_PAN:仅包含平移按钮；BMAP_NAVIGATION_CONTROL_ZOOM：仅包含缩放按钮*/
	
            //添加控件和比例尺
        function add_control(){
            map.addControl(top_left_control);        
            map.addControl(top_left_navigation);     
            map.addControl(top_right_navigation);    
        }
            //移除控件和比例尺
        function delete_control(){
            map.removeControl(top_left_control);     
            map.removeControl(top_left_navigation);  
            map.removeControl(top_right_navigation); 
        }

        add_control();


        var convertor = new BMap.Convertor();
        var index=0;
        var pts_trans=[];
        initData(points,index,points.length,10);
        function initData(pts,start,length,page){
            var temp=[];
            var isLast=false;
            for(var i = start;i < start + page;i++){
                if(i>=length){
                    isLast=true;
                    break;
                }
                temp.push(pts[i]);
            }
            convertor.translate(temp, 1, 5, function(data){
                if(data.status === 0) {
                    for(var i= 0;i<data.points.length;i++){
                        pts_trans.push(data.points[i]);
                    }
                    initData(pts,start+page,length,page);
                }
                if(isLast){
                    for(var i = 0;i<pts_trans.length;i++){
                        var info_msg = opts[i];
                        markers[i]=new BMap.Marker(pts_trans[i]);
                        markers[i].addEventListener("click",click_marker(opts[i],pts_trans[i]));
                        map.addOverlay(markers[i]);
                    }
                }
            });
        }
       

        
    </script>
</body>
</html>
